
// 性能优化
import React from 'react';

class ListOfWords extends React.PureComponent {
    render() {
        console.log('this.props.words',this.props.words)
        return <div>{this.props.words.join(',')}</div>;
    }
}
  
class WordAdder extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        words: ['marklar']
      };
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
        // 这部分代码很糟，而且还有 bug
        // 由于words数组的引用没有发生变化，尽管数组内容有了变化，但React无法察觉到这种变化。
        // const words = this.state.words;
        // words.push('marklar');
        // this.setState({words: words});
        this.setState(state => ({
            //words: state.words.concat(['test'])
            words: [...state.words,'test']
        }));
    }
  
    render() {
      return (
        <div>
            <button onClick={this.handleClick}>点击</button>
            <ListOfWords words={this.state.words} />
        </div>
      );
    }
}
export default function OptimizingPerformance() {
    return(
        <div>
            <h1>OptimizingPerformance</h1>
            <WordAdder />
        </div>
    )
}